import { CloseOutlined, SearchOutlined } from "@ant-design/icons";
import { Input, DatePicker } from "antd";
import dayjs from "dayjs";
import moment from "moment";
import { useState } from "react";

import { formatDate } from "~/modules/shared/utils/common";

const { RangePicker } = DatePicker;

interface Props {
  close: Function;
  filter: Function;
}

const SearchFiltering = (props: Props) => {
  const [inputValue, setValue] = useState("");
  const [createTime, setCreateTime] = useState<string[]>([]);
  const [updateTime, setUpdateTime] = useState<string[]>([]);

  const onSearch = (target: any) => {
    setValue(target.value);
    props.filter(target.value, createTime, updateTime);
  };
  const onClose = () => {
    setValue("");
    setCreateTime([]);
    setUpdateTime([]);
    props.filter("", [], []);
    props.close(false);
  };
  // 创建时间
  const onCreatChange = (dates: any, dateStrings: string[]) => {
    if (dateStrings[0] && dateStrings[1]) {
      dateStrings[1] = formatDate(dayjs(dateStrings[1]).add(1, "day"));
      setCreateTime(dateStrings);
    } else {
      dateStrings = [];
      setCreateTime([]);
    }

    props.filter(inputValue, dateStrings, updateTime);
  };
  // 修改时间
  const onUpdateChange = (dates: any, dateStrings: string[]) => {
    if (dateStrings[0] && dateStrings[1]) {
      dateStrings[1] = formatDate(dayjs(dateStrings[1]).add(1, "day"));
      setCreateTime(dateStrings);
    } else {
      dateStrings = [];
      setCreateTime([]);
    }
    props.filter(inputValue, createTime, dateStrings);
  };
  return (
    <div className="flex justify-between">
      <div>
        <Input
          value={inputValue}
          placeholder="请输入"
          prefix={<SearchOutlined />}
          bordered={false}
          onInput={(e) => onSearch(e.target)}
        />
      </div>
      <div className="flex">
        <div>
          <span className="text-12px color-#6E7280 mt-1px mr-10px mb-1px ml-10px">
            创建日期
          </span>
          <RangePicker
            placeholder={["开始日期", "结束日期"]}
            className="bg-#E3E4F5!"
            ranges={{
              今天: [moment(), moment()],
            }}
            onChange={onCreatChange}
          />
        </div>
        <div>
          <span className="text-12px color-#6E7280 mt-1px mr-10px mb-1px ml-10px">
            最后修改日期
          </span>
          <RangePicker
            placeholder={["开始日期", "结束日期"]}
            className="bg-#E3E4F5!"
            ranges={{
              今天: [moment(), moment()],
            }}
            onChange={onUpdateChange}
          />
        </div>
        <div
          className="w-32px flex justify-center items-center cursor-pointer ml-10px"
          onClick={() => onClose()}
        >
          <CloseOutlined />
        </div>
      </div>
    </div>
  );
};

export default SearchFiltering;
